<template>
  <div class="cs-container">
    <!-- 页面名称 -->
    <div class="header">
      <span>仓库信息维护</span>
    </div>

    <!-- 内容 -->
    <el-main class="cs-body">
      <el-row class="row-1">
        <!-- 新增按钮及查询 -->
        <el-button type="primary" class="add" @click="onHandleAdd"
          >新增</el-button
        >

        <el-dialog
          :width="500"
          :title="pageData.editDialogTitle"
          v-model="pageData.editDialogVisible"
          :close-on-click-modal="false"
          destroy-on-close
          custom-class="editDialog-class"
        >
          <edit
            :modifyObj="pageData.currentRow"
            :isAdd="pageData.isAdd"
            @Ok="onOk"
            @Cancel="() => (pageData.editDialogVisible = false)"
          />
        </el-dialog>

        <div class="search">
          <el-input
            v-model="pageData.queryParams.fParamCode"
            placeholder="请输入仓库编号"
            clearable
            ><template #prepend>仓库编号</template>
          </el-input>

          <el-input
            v-model="pageData.queryParams.fParamName"
            placeholder="请输入仓库名称"
            clearable
            ><template #prepend>仓库名称</template>
          </el-input>

          <el-button type="primary" plain @click="onHandleSearch"
            >搜索</el-button
          >
          <el-button type="warning" plain @click="onHandleReset"
            >重置</el-button
          >
        </div>
      </el-row>

      <el-row class="row-2">
        <!-- tabel -->
        <el-table
          :data="pageData.tableParams.tableData"
          style="width: 100%"
          border
        >
          <el-table-column
            fixed
            prop="fParamCode"
            label="仓库编号"
            min-width="120"
          />
          <el-table-column prop="fParamName" label="仓库名称" min-width="120" />
          <el-table-column prop="fParamFrom" label="管理部门" min-width="120" />
          <el-table-column prop="fParamType" label="管理员" min-width="120" />
          <el-table-column prop="fState" label="状态" width="120" />
          <el-table-column prop="fRemark" label="备注" width="600" />
          <el-table-column fixed="right" label="操作" width="120">
            <template #default="{ row }">
              <el-button
                link
                type="primary"
                size="small"
                @click="onHandleEdit(row)"
                >编辑</el-button
              >

              <el-button
                link
                type="primary"
                size="small"
                @click="onHandleDel(row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页查询 -->
        <el-col :span="24">
          <el-pagination
            style="margin-top: 20px"
            layout="total, sizes, prev, pager, next, jumper"
            :page-sizes="pageData.tableParams.pageSizeOptions"
            :current-page="pageData.queryParams.page"
            :page-size="pageData.queryParams.pageSize"
            :total="pageData.tableParams.totalCount"
            @current-change="onHandleCurrentChange"
            @size-change="onHandleSizeChange"
          >
          </el-pagination>
        </el-col>
      </el-row>
    </el-main>
  </div>
</template>

<script>
// import { reactive } from "vue";
import { onMounted, nextTick, reactive, ref, toRefs, computed } from "vue";
import { query_csinfo, del_csinfo } from "@/api/basic/parameterinfo";
import edit from "./edit";
import utils from "@/common/utils";
import { ElLoading, ElMessage, ElMessageBox } from "element-plus";

export default {
  components: { edit },

  setup() {
    onMounted(() => {
      nextTick(getCsinfoTableData);
    });
    const paramTable = ref();

    const pageData = reactive({
      queryParams: {
        fParamCode: "",
        fParamName: "",
        page: 1,
        pageSize: 10,
        // keyWord: "",
      },
      tableParams: {
        tableLoading: false,
        tableHeight: 0,
        pageSizeOptions: ["10", "15", "30", "50", "100", "200"],
        totalCount: 0,
        tableData: [],
      },
      currentRow: {},
      editDialogTitle: "参数",
      editDialogVisible: false,
      isAdd: false,
    });

    // 分页查询
    const onHandleCurrentChange = (e) => {
      pageData.queryParams.page = e;
      getCsinfoTableData();
    };
    const onHandleSizeChange = (e) => {
      pageData.queryParams.page = 1;
      pageData.queryParams.pageSize = e;
      getCsinfoTableData();
    };
    // 获取参数数据
    const getCsinfoTableData = () => {
      pageData.currentRow = {};
      pageData.tableParams.tableLoading = true;
      query_csinfo(pageData.queryParams) //获取参数信息接口
        .then((res) => {
          console.log("res.data", res.list);
          let arr = [];
          for (let i in res.list) {
            console.log(res.list[i].fParamFrom);
            switch (res.list[i].fParamFrom) {
              case 0:
                res.list[i].fParamFrom = "字典";
                break;
              case 10:
                res.list[i].fParamFrom = "员工";
                break;
              case 20:
                res.list[i].fParamFrom = "组织结构";
                break;
              default:
                break;
            }
            switch (res.list[i].fParamType) {
              case 1:
                res.list[i].fParamType = "字符串";
                break;
              case 2:
                res.list[i].fParamType = "整数";
                break;
              case 3:
                res.list[i].fParamType = "小数";
                break;
              case 4:
                res.list[i].fParamType = "日期";
                break;
              default:
                break;
            }
            switch (res.list[i].fState) {
              case 0:
                res.list[i].fState = "草稿";
                break;
              case 10:
                res.list[i].fState = "审核中";
                break;
              case 20:
                res.list[i].fState = "作废/删除";
                break;
              case 30:
                res.list[i].fState = "审核通过";
                break;
              default:
                break;
            }
            arr.push(res.list[i]);
          }
          pageData.tableParams.tableData = arr;

          pageData.tableParams.totalCount = res.data.list.length;
          pageData.tableParams.tableLoading = false;
        })
        .catch((error) => {
          // ElMessage.error(error.message || "请求出错");
          pageData.tableParams.tableLoading = false;
        });
    };
    // 模糊查询
    const onHandleSearch = () => {
      getCsinfoTableData();
    };
    // 重置
    const onHandleReset = () => {
      pageData.queryParams.fParamCode = "";
      pageData.queryParams.fParamName = "";
      getCsinfoTableData();
    };

    // 新增
    const onHandleAdd = () => {
      pageData.editDialogTitle = "新增仓库信息";
      pageData.editDialogVisible = true;
      pageData.isAdd = true;
    };
    const onOk = ({ isAdd, retObj }) => {
      pageData.isAdd = isAdd;
      pageData.editDialogVisible = false;
      getCsinfoTableData();
    };

    // 编辑
    const onHandleEdit = (row) => {
      console.log("row", row);
      pageData.currentRow = {};
      if (utils.isEmpty(row)) {
        ElMessage.warning("请选中需要操作的数据行");
        return;
      }
      pageData.currentRow = row;
      pageData.editDialogVisible = true;
      pageData.editDialogTitle = "修改仓库信息";

      pageData.isAdd = false;
    };

    // 删除
    const onHandleDel = (row) => {
      pageData.currentRow = {};
      console.log(row);
      if (utils.isEmpty(row.fId)) {
        ElMessage.warning("请选中需要操作的数据行");
        return;
      }
      if (row.fState === 20) {
        ElMessage.error("该参数信息已被删除，不可重复删除");
      } else {
        ElMessageBox.confirm("是否确定删除该参数信息", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            // ElMessage({
            //   type: "success",
            //   message: "删除成功",
            // });
            del_csinfo(row.fId).then((res) => {
              // console.log(res);
              ElMessage({
                type: "success",
                message: "删除成功",
              });
              getCsinfoTableData();
            });
          })
          .catch(() => {
            ElMessage({
              type: "info",
              message: "删除失败",
            });
            return;
          });
      }
    };

    return {
      paramTable,
      pageData,
      onHandleCurrentChange,
      onHandleSizeChange,
      getCsinfoTableData,
      onHandleSearch,
      onHandleReset,
      onHandleAdd,
      onOk,
      onHandleEdit,
      onHandleDel,
    };
  },
};
</script>

<style lang="scss" scoped>
.cs-container {
  padding: 0;
  margin: 0;

  .header {
    width: 100%;
    background-color: white;
    text-align: left;
    user-select: none;

    span {
      line-height: 50px;
      font-size: 18px;
      font-weight: 700;
      text-align: left;
      margin-left: 20px;
    }
  }

  .cs-body {
    width: 100%;
    margin-top: 20px;
    background-color: #fff;
    height: 77vh;

    .row-1 {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .search {
        display: flex;
        align-items: center;
        user-select: none;

        .el-input {
          margin-right: 20px;
        }
      }
    }

    .row-2 {
      margin-top: 20px;
    }
  }
}
</style>

<style>
.el-dialog {
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  user-select: none;
}

.el-dialog .el-dialog__body {
  flex: 1;
  overflow: auto;
}
.el-dialog .el-dialog__header {
  padding: 20px 0;
  padding-left: 20px;
  margin: 0;
  word-break: break-all;
  border-bottom: 1px solid #ddd;
  text-align: left;
}

.el-select {
  width: 100%;
  border: none;
  border-radius: 0;
}
.el-select .el-option {
  width: 100%;
  border: none;
  border-radius: 0;
}
.el-input-group__prepend {
  padding: 0 10px;
}
</style>
